<template>
  <el-divider style="width: 100%"
  ><span style="font-size: 23px; font-family: '楷体'">数据统计</span></el-divider
  >
  请选择查看的卓越班届数 ：
  <el-select v-model="selectValue" placeholder="选择卓越班班级" :change="reloadData()">
    <el-option
        v-for="item in classNameList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
  <el-tabs v-model="activeName" @tab-change="handleClick">
    <el-tab-pane label="数据概览" name="数据概览" style="display: flex;justify-content: space-around;">
      <el-space wrap>
        <el-card style="flex: 1;height: 375px;">
          <div class="text">——总入班/总报名人数：——</div>
          <div style="text-align: center">
            <span class="textPass">{{ totalData.totalZYClass }}</span> /
            <span class="textJoin">{{ totalData.totalApplication }}</span>
          </div>
          <br/>
          <div class="text">——通过/参加笔试人数：——</div>
          <div style="text-align: center">
            <span class="textPass">{{ totalData.passExam }}</span> /
            <span class="textJoin">{{ totalData.joinExam }}</span>
          </div>
          <br/>
          <div class="text">——通过/参加面试人数：——</div>
          <div style="text-align: center">
            <span class="textPass">{{ totalData.passIntv }}</span> /
            <span class="textJoin">{{ totalData.joinIntv }}</span>
          </div>
          <br/>
          <div class="text">——通过/申请免试人数：——</div>
          <div style="text-align: center">
            <span class="textPass">{{ totalData.passExem }}</span> /
            <span class="textJoin">{{ totalData.askExem }}</span>
          </div>
        </el-card>
        <div ref="passMain" class="main"></div>
        <div ref="main" class="main"></div>
        <div ref="specialMain" class="main"></div>
      </el-space>
    </el-tab-pane>
    <el-tab-pane label="考试相关数据" name="考试相关数据">
      <el-space wrap>
        <div ref="examScoreCount" class="examAndIntv"></div>
        <div ref="examStateCount" class="examAndIntv"></div>
      </el-space>
    </el-tab-pane>
    <el-tab-pane label="面试相关数据" name="面试相关数据">
      <el-space wrap>
        <div ref="intvScoreCount" class="examAndIntv"></div>
        <div ref="intvStateCount" class="examAndIntv"></div>
      </el-space>
    </el-tab-pane>
    <el-tab-pane label="入班人员数据" name="入班人员数据">
      <el-space wrap>
        <div ref="inClassStudentClass" class="inClassStudentClass"></div>
      </el-space>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import {ElMessage} from 'element-plus'
//  按需引入 echarts
import * as echarts from 'echarts'
import {
  getInClassGradeService,
  getTotalDataService,
  getInClassSpecialService,
  getExamScoreCountService,
  getExamStateCountService,
  getIntvScoreCountService,
  getIntvStateCountService,
  getAllClassNameService,
  getInClassStudentClassService
} from '@/apis/dataCount'
import {getTimeInfoService} from '@/apis/timeManage'

const classNameList = ref([{value: '', label: ''}])
const activeName = ref('数据概览')
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const specialMain = ref()
const passMain = ref()

const examScoreCount = ref()
const examStateCount = ref()

const intvScoreCount = ref()
const intvStateCount = ref()
const inClassStudentClass = ref()

const selectValue = ref('')

const totalData = ref({
  totalApplication: 0,
  totalZYClass: 0,
  joinExam: 0,
  passExam: 0,
  joinIntv: 0,
  passIntv: 0,
  askExem: 0,
  passExem: 0
})
//报名数据
const mainGradeX: string[] = []
const mainGradeY: number[] = []
const mainSpecial: object[] = []
//考试数据
const examScoreCategory: string[] = []
const examScoreValue: number[] = []
const examState: object[] = []
//面试数据
const intvScoreCategory: string[] = []
const intvScoreValue: number[] = []
const intvState: object[] = []

//入班班级数据
const studentClassCategory: string[] = []
const studentClassValue: number[] = []

onMounted(() => {
  //获取下拉栏内数据
  getAllClassNameService().then((res) => {
    if (res.data.code === 1) {
      console.log(res.data.data)
      let className = res.data.data
      for (let v of className) {
        classNameList.value.push({lable: v, value: v})
      }
      /* console.log(classNameList.value);
        let lastValue = classNameList.value.length - 1;
        //默认第一个
        selectValue.value = classNameList.value[lastValue].value */
    } else {
      ElMessage({type: 'error', message: res.data.msg})
    }
  })
  getNowClassName()
})
//获取当前班级名称
const getNowClassName = async () => {
  let result = await getTimeInfoService()
  if (result.data.code === 1) {
    let res = result.data.data
    selectValue.value = res.className
  }
}

const clearData = () => {
  mainGradeX.length = 0
  mainGradeY.length = 0
  mainSpecial.length = 0
  examScoreCategory.length = 0
  examScoreValue.length = 0
  examState.length = 0
  intvScoreCategory.length = 0
  intvScoreValue.length = 0
  intvState.length = 0
  studentClassCategory.length = 0
  studentClassValue.length = 0
}
const reloadData = () => {
  clearData()
  setTimeout(() => {
    setTotalData()
    setMainGradeData()
    setSpecialData()
    setExamScoreData()
    setExamStateData()
    setIntvScoreData()
    setIntvStateData()
    setInClassStudentClassData()
  }, 100)
}
//总数据页年级数据
const setMainGradeData = async () => {
  mainGradeX.length = 0
  mainGradeY.length = 0
  console.log('value1:' + selectValue.value)
  let result = await getInClassGradeService(selectValue.value)
  if (result.data.code == 1) {
    let category = result.data.data.category
    let value = result.data.data.value
    if (mainGradeX.length === 0) {
      for (var i = 0; i < category.length; i++) {
        mainGradeX.push(category[i])
      }
      value.forEach((i: number) => {
        mainGradeY.push(i)
      })
      mainGradeInit()
    }
  }
}

function mainGradeInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '报名人员年级分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      data: mainGradeX
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: mainGradeY,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

//专业分布情况
const setSpecialData = async () => {
  mainSpecial.length = 0
  let result = await getInClassSpecialService(selectValue.value)
  if (result.data.code == 1) {
    let category = result.data.data.category
    let values = result.data.data.value
    if (category.length == values.length && mainSpecial.length === 0) {
      for (let index = 0; index < category.length; index++) {
        mainSpecial.push({value: values[index], name: category[index]})
        mainSpecialInit()
      }
    }
  }
}

function mainSpecialInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(specialMain.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '报名人员专业分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} 人 ({d}%)'
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '50%',
        data: mainSpecial,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

//通过情况
const setTotalData = async () => {
  let result = await getTotalDataService(selectValue.value)
  if (result.data.code == 1) {
    let data = result.data.data
    //赋值
    totalData.value.totalApplication = data.totalApplication
    totalData.value.totalZYClass = data.totalZYClass
    totalData.value.joinExam = data.joinExam
    totalData.value.passExam = data.passExam
    totalData.value.joinIntv = data.joinIntv
    totalData.value.passIntv = data.passIntv
    totalData.value.askExem = data.askExem
    totalData.value.passExem = data.passExem
    mainPassInit()
  }
}

function mainPassInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(passMain.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '通过比例情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      right: 0,
      top: 7
    },
    xAxis: {
      type: 'value'
    },
    grid: {
      left: '3%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'category',
      data: ['笔试', '面试', '免试', '入班/\n报名']
    },
    series: [
      {
        name: '通过',
        type: 'bar',
        color: 'rgb(12, 159, 42)',
        data: [
          totalData.value.passExam,
          totalData.value.passIntv,
          totalData.value.passExem,
          totalData.value.totalZYClass
        ],
        label: {
          show: true,
          position: 'right'
        }
      },
      {
        name: '参加/申请',
        type: 'bar',
        color: 'rgb(89, 111, 113)',
        data: [
          totalData.value.joinExam,
          totalData.value.joinIntv,
          totalData.value.askExem,
          totalData.value.totalApplication
        ],
        label: {
          show: true,
          position: 'right'
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

//考试分数分布
const setExamScoreData = async () => {
  examScoreCategory.length = 0
  examScoreValue.length = 0
  let result = await getExamScoreCountService(selectValue.value)
  if (result.data.code === 1) {
    let category = result.data.data.category
    let value = result.data.data.value
    if (category.length === value.length) {
      for (var i = 0; i < category.length; i++) {
        examScoreCategory.push(category[i])
        examScoreValue.push(value[i])
      }
      examScoreInit()
    }
  }
}

function examScoreInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(examScoreCount.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '考试分数分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      data: examScoreCategory
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: examScoreValue,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

//考试状态饼图
const setExamStateData = async () => {
  examState.length = 0
  let result = await getExamStateCountService(selectValue.value)
  if (result.data.code === 1) {
    let category = result.data.data.category
    let values = result.data.data.value
    if (category.length == values.length) {
      for (let index = 0; index < category.length; index++) {
        examState.push({value: values[index], name: category[index]})
      }
    }
  }
  examStateInit()
}

function examStateInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(examStateCount.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '考试状态分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} 人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 30,
      top: 40
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '50%',
        data: examState,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

//面试分数分布
const setIntvScoreData = async () => {
  intvScoreCategory.length = 0
  intvScoreValue.length = 0
  let result = await getIntvScoreCountService(selectValue.value)
  if (result.data.code === 1) {
    let category = result.data.data.category
    let value = result.data.data.value
    if (category.length === value.length) {
      for (var i = 0; i < category.length; i++) {
        intvScoreCategory.push(category[i])
        intvScoreValue.push(value[i])
      }
    }
  }
  intvScoreInit()
}

function intvScoreInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(intvScoreCount.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '面试分数分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      data: intvScoreCategory
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: intvScoreValue,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

//面试试状态饼图
const setIntvStateData = async () => {
  intvState.length = 0
  let result = await getIntvStateCountService(selectValue.value)
  if (result.data.code === 1) {
    let category = result.data.data.category
    let values = result.data.data.value
    if (category.length == values.length) {
      for (let index = 0; index < category.length; index++) {
        intvState.push({value: values[index], name: category[index]})
      }
    }
  }
  intvStateInit()
}

function intvStateInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(intvStateCount.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '面试状态分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} 人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 30,
      top: 40
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '50%',
        data: intvState,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

const setInClassStudentClassData = async () => {
  studentClassCategory.length = 0
  studentClassValue.length = 0
  let result = await getInClassStudentClassService(selectValue.value)
  if (result.data.code === 1) {
    let category = result.data.data.category
    let value = result.data.data.value
    if (category.length === value.length) {
      for (var i = 0; i < category.length; i++) {
        studentClassCategory.push(category[i])
        studentClassValue.push(value[i])
      }
    }
  }
  inClassStudentClassInit()
}

function inClassStudentClassInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(inClassStudentClass.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '入班学生班级分布情况',
      textStyle: {
        fontFamily: '楷体'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      axisLabel: {
        interval: 0, //代表显示所有x轴标签显示
        rotate: 20 //代表逆时针旋转45度
      },
      data: studentClassCategory
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: studentClassValue,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  //console.log(tab, event)
  console.log(activeName.value)
}
</script>

<style>
.text {
  color: rgb(0, 0, 0);
  font-family: '楷体';
  font-size: large;
  font-weight: bolder;
  text-align: center;
}

.textPass {
  color: rgb(12, 159, 42);
  font-size: 30px;
  font-weight: 900;
}

.textJoin {
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-weight: bolder;
}

.main {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 375px;
  width: 370px;
  border: solid 1px rgb(226, 242, 240);
  border-radius: 7px;
}

.examAndIntv {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 375px;
  width: 600px;
  border: solid 1px rgb(226, 242, 240);
  border-radius: 7px;
}

.inClassStudentClass {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 375px;
  width: 1500px;
  border: solid 1px rgb(226, 242, 240);
  border-radius: 7px;
}
</style>
